<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
import { useLoginUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
const { loginUserInfo } = storeToRefs(useLoginUserStore())
const { setLoginUserInfoImg } = useLoginUserStore()
const router = useRouter()
//返回上一级
const onBackClick = () => {
  router.go(-1)
}
const show = ref(false)
const val = ref('')
const menuItems = [
  {
    name: '查看头像'
  },
  {
    name: '修改头像'
  }
]
const click = () => {
  show.value = true
}

const fileInput = ref(null)
const selectedFile = ref(null)
const formData = new FormData()
const onFileChange = (event) => {
  const file = event.target.files[0]
  if (file) {
    selectedFile.value = file
    // 在这里你可以处理文件，比如上传等

    formData.append('file', selectedFile.value)
    formData.append('userId', loginUserInfo.value.id)
    console.log(file)
    request
      .post('/employee/uploadPhotoAvatar', formData, {
        // 注意：不需要手动设置 Content-Type，axios 会自动处理
      })
      .then((res) => {
        setLoginUserInfoImg(res.data)
      })
  }
}
const choose = (item) => {
  console.log(item)
  val.value = item.name
  if (item.name == '修改头像') {
    fileInput.value.click()
  }
}
</script>
<template>
  <div class="user_homepage">
    <nut-navbar class="homepage_navbar" left-show @click-back="onBackClick">
      <template #left>
        <div>用户中心</div>
      </template>
    </nut-navbar>
    <nut-cell-group class="homepage_group">
      <nut-cell class="" @click="click" is-link>
        <template #title>
          <div class="unity uesr_img">
            <div class="user_left_title">头像</div>
            <div class="user_left_img">
              <nut-avatar shape="square" size="small">
                <img :src="loginUserInfo.profilePicture" alt="" />
              </nut-avatar>
            </div>
          </div>
        </template>
      </nut-cell>
      <nut-cell class="">
        <template #title>
          <div class="unity">
            <div class="user_left_img">姓名</div>
            <div class="user_detailed_info">{{ loginUserInfo.userName }}</div>
          </div>
        </template>
      </nut-cell>
      <nut-cell class="">
        <template #title>
          <div class="unity">
            <div class="user_left_img">手机号</div>
            <div class="user_detailed_info">{{ loginUserInfo.loginName }}</div>
          </div>
        </template>
      </nut-cell>
    </nut-cell-group>
    <input
      type="file"
      ref="fileInput"
      style="display: none"
      accept="image/*"
      @change="onFileChange"
    />
    <nut-action-sheet
      v-model:visible="show"
      :menu-items="menuItems"
      @choose="choose"
    />
  </div>
</template>
<style lang="scss" scoped>
.user_homepage {
  .homepage_navbar {
    :deep(.nut-navbar__left) {
      padding: 0px;
      font-size: 16px;
      color: #3b3b3b !important;
    }
    :deep(.nut-icon-left) {
      color: #3b3b3b !important;
    }
  }
  .homepage_group {
    .unity {
      display: flex;
      justify-content: space-between;
    }
    .uesr_img {
      .user_left_title {
        height: 32px;
        line-height: 32px;
      }
    }
  }
}
</style>
